<template>
  <div>
    <el-drawer
      title="新增商品"
      :visible.sync="isShow"
      size="45%"
      @close="closeDrawHandle"
    >
      <div style="margin: 0 20px">
        <el-form>
          <el-form-item label="请输入广告标题" required>
            <el-input />
          </el-form-item>
          <el-form-item label="图片" required>
            <el-upload
              action="#"
              list-type="picture-card"
              :auto-upload="false"
            >
              <i slot="default" class="el-icon-plus" />
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleDownload(file)"
                  >
                    <i class="el-icon-download" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-form-item>
          <el-form-item label="请输入跳转路径Url" required>
            <el-input />
          </el-form-item>
        </el-form>
        <div class="demo-drawer__footer">
          <el-button @click="closeDrawHandle">取 消</el-button>
          <el-button type="primary" @click="closeDrawHandle">确定</el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  computed: {
    isShow: {
      set(newValue) {
        return newValue
      },
      get() {
        return this.show
      }
    }
  },

  methods: {
    closeDrawHandle() {
      this.$emit('changeShow', false)
    }
  }
}
</script>

<style scoped>

</style>
